<template>
  <Row align="middle" justify="center" class="login-container">
    <Form :model="form" :rules="rules" ref="loginFormRef" class="login-container-form">
      <h1 class="font-bold my-4 text-center text-2xl">Admin Boot</h1>
      <FormItem prop="username">
        <Input v-model="form.username" placeholder="Username" />
      </FormItem>
      <FormItem prop="password">
        <Input v-model="form.password" type="password" placeholder="Password" />
      </FormItem>
      <FormItem class="inline-flex">
        <Space>
          <Button type="default" @click="handleReset(form)">Reset</Button>
          <Button type="primary" @click="handleSubmit(form)">Login</Button>
        </Space>
      </FormItem>
    </Form>
  </Row>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'

const store = useStore()
const router = useRouter()

const form = reactive({
  username: '',
  password: ''
})
const rules = {
  username: [{ required: true, message: 'Please input username', trigger: 'blur' }],
  password: [{ required: true, message: 'Please input password', trigger: 'blur' }]
}
const loginFormRef = ref()
function handleSubmit() {
  loginFormRef.value.validate((valid) => {
    if (valid) {
      store
        .dispatch('login', form)
        .then((res) => {
          console.log(res)
          router.push('/')
        })
        .catch((err) => {
          console.log(err)
        })
    } else {
      console.log('error submit!!')
    }
  })
}
function handleReset() {
  loginFormRef.value.resetFields()
}
</script>

<style lang="less">
.login-container {
  @apply min-h-screen bg-warm-gray-100 flex flex-col justify-center items-center;
  &-form {
    @apply min-w-200px;
  }
  &-memo {
    @apply text-center text-blue-800 font-black text-4xl;
  }
}
</style>
